import 'package:flutter/material.dart';

class WrapFlowDemoPage extends StatelessWidget {
  const WrapFlowDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wrap与Flow布局示例')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Wrap 示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            Container(
              color: Colors.grey[200],
              padding: const EdgeInsets.all(8),
              child: Wrap(
                spacing: 8.0, // 主轴(水平)方向间距
                runSpacing: 4.0, // 纵轴（垂直）方向间距
                alignment: WrapAlignment.center, // 沿主轴方向居中
                children: const <Widget>[
                  Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('A'),
                    ),
                    label: Text('Hamilton'),
                  ),
                  Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('M'),
                    ),
                    label: Text('Lafayette'),
                  ),
                  Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('H'),
                    ),
                    label: Text('Mulligan'),
                  ),
                  Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('J'),
                    ),
                    label: Text('Laurens'),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),
            const Text(
              'Flow 示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            Container(
              color: Colors.grey[200],
              child: Flow(
                delegate: TestFlowDelegate(margin: const EdgeInsets.all(10.0)),
                children: <Widget>[
                  Container(width: 80.0, height: 80.0, color: Colors.red),
                  Container(width: 80.0, height: 80.0, color: Colors.green),
                  Container(width: 80.0, height: 80.0, color: Colors.blue),
                  Container(width: 80.0, height: 80.0, color: Colors.yellow),
                  Container(width: 80.0, height: 80.0, color: Colors.brown),
                  Container(width: 80.0, height: 80.0, color: Colors.purple),
                ],
              ),
            ),
            const SizedBox(height: 10),
            const Text('Flow 说明：Flow不能自适应子组件大小，需指定父容器高度或在FlowDelegate中返回固定高度。'),
          ],
        ),
      ),
    );
  }
}

class TestFlowDelegate extends FlowDelegate {
  final EdgeInsets margin;
  const TestFlowDelegate({this.margin = EdgeInsets.zero});

  @override
  void paintChildren(FlowPaintingContext context) {
    double x = margin.left;
    double y = margin.top;
    for (int i = 0; i < context.childCount; i++) {
      final w = context.getChildSize(i)!.width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i)!.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) => oldDelegate != this;
}
